<template>
  <div>
    <!-- 顶部标题区 -->
    <div class="title">
      <div class="text">购物街</div>
    </div>
    <MiniTabbar :tabberList="['流行','新款','精选']" ref="minitabbar2" v-show="isTabshow" class="tabControl"></MiniTabbar>
    <scroll ref='scroll' :pullUpLoad="true" @pullingUp="loadMore" :probe-type="2" @scroll="goodslistscroll" class="scroll">
      <div class="content">
      <!-- 轮播图区域 -->
      <div class="swipercontainer">
        <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
         <swiper-slide v-for="(item,index) in swiperList" :key="index">
           <img width="100%vw" :src="item.image" @load="swiperimageload">
         </swiper-slide>
         <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
      </div>
       <!-- 推荐区域 -->
       <div class="recommend-view">
         <div class="recommend-item" v-for="(item,index) in recommendList" :key="index">
           <a :href="item.link" />
           <img :src="item.image">
           <div class="recommend-title">
             {{item.title}}
           </div>
         </div>
       </div>
       <!-- 本周流行区域 -->
       <div class="feature-view">
         <a href="javascript:">
           <img src="~assets/img/home/recommend_bg.jpg" alt />
         </a>
       </div>
       <!-- 内部商品切换栏 -->
       <MiniTabbar :tabberList="['流行','新款','精选']" ref="minitabbar1"></MiniTabbar>
       <!-- 商品列表区域 -->
       <GoodList :goods="showGoods"></GoodList>
      </div>
    </scroll>
    <!-- 回到顶部按钮 -->
    <BackTop @backtop="backtop" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
// 滚动插件
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// 导入自己封装的better-scroll插件
import scroll from 'components/scroll/scroll.vue'

// 导入子组件
import MiniTabbar from 'components/Minitabbar/minitabbar.vue'
import GoodList from 'components/goodlist/goodlist.vue'
import BackTop from 'components/backtop/backtop.vue'

// 导入网络请求
import { getHomeData, getHomeGoods } from 'network/home.js'

// 导入自定义函数
import { debounce } from 'common/utils.js'
export default {
  name: 'home',
  data() {
    return {
      // 轮播图图片对象
      swiperList: {},
      // 轮播插件的配置对象
      swiperOptions: {
        // 自动播放 延迟3000ms
        autoplay: true,
        // 循环播放
        loop: true,
        // 拖动临界值
        threshold: 30,
        // 分页器配置
        pagination: {
          el: '.swiper-pagination',
        }
      },
      // 推荐区域图片对象
      recommendList: {},
      // goods商品列表数据
      goods: {
        // 对应流行、新款和精选数据
        // page是当前页码，list是列表里面所有的数据
        pop: { page: 0, list: []},
        new: { page: 0, list: []},
        sell: { page: 0, list: []}
      },
      // 列表参数
      goodslist: ['pop', 'new', 'sell'],
      // 当前列表的类型
      cuurentType: 'pop',
      // 第一个切换栏的位置
      tabOffsetTop: 0,
      // 第二个tabbar栏是否显示
      isTabshow: false,
      // 离开页面的时候滚动到Y的距离
      saveY: 0,
      // backtop 是否显示
      isShowBackTop: false
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    scroll,
    MiniTabbar,
    GoodList,
    BackTop
  },
  computed: {
    showGoods() {
      return this.goods[this.cuurentType].list
    },
    // 轮播图实例
    Swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  directives: {
    swiper: directive
  },
  methods: {
    // 请求首页的轮播图、推荐数据
    getHomeMultidata() {
      getHomeData().then(res => {
        let result = res.data
        this.swiperList = result.data.banner.list
        this.recommendList = result.data.recommend.list
      })
    },
    // 获取商品列表数据
    getHomeGoodsList(type) {
      // 每次都能获取到商品当前页码，并且+1之后就能获取到后面一页的数据了
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
        let result = res.data
        this.goods[type].list.push(...result.data.list);
        this.goods[type].page += 1;
      })
    },
    // minitabbar点击事件
    // tabbarClick(index) {
    // },
    // 上拉加载更多
    loadMore() {
      console.log('上拉加载')
      this.getHomeGoodsList(this.cuurentType)
      this.$refs.scroll.finishPullUp()
    },
    // 监听bs滚动事件 来确定第二个tab栏是否展示
    goodslistscroll(postiton) {
      this.isTabshow = -postiton.y >= this.tabOffsetTop
      this.isShowBackTop = -postiton.y >= 1000
    },
    // 监听轮播图加载完成
    swiperimageload() {
      console.log(this.tabOffsetTop);
      this.tabOffsetTop = this.$refs.minitabbar1.$el.offsetTop - 40
    },
    // 回到顶部点击
    backtop() {
      this.$refs.scroll.scrollTo(0, 0, 1000)
      this.$refs.scroll.refresh()
    }
  },
  created() {
    this.getHomeMultidata()
    // 获取3个列表的数据
    // 流行数据
    this.getHomeGoodsList('pop')
    // 新款数据
    this.getHomeGoodsList('new')
    // 精选数据
    this.getHomeGoodsList('sell')
    // 监听minitabbar的点击
    this.$bus.$on('tabbarClick', i => {
      this.cuurentType = this.goodslist[i]
      // 让两个tab的index保持一致，两个中间点击任意一个就会联动切换了
      this.$refs.minitabbar1.currentIndex = i;
      this.$refs.minitabbar2.currentIndex = i;
    })
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 800);
    this.ItemListener = () => {
      refresh();
    };
    this.$bus.$on('imageLoad', this.ItemListener)
  },
  activated() {
    console.log(this.saveY)
    this.$refs.scroll.scrollTo(0, this.saveY, 0)
    this.$refs.mySwiper.$swiper.autoplay.start()
    console.log(this.Swiper)
    this.$refs.scroll.refresh()
  },
  deactivated() {
    this.$refs.mySwiper.$swiper.autoplay.stop()
    this.saveY = this.$refs.scroll.scroll.y;
    console.log('离开首页的y轴位置' + this.saveY);
    console.log(this.Swiper)
    // 取消全局事件监听
    this.$bus.$off('itemImageLoad', this.homeItemListener)
    // this.$bus.$off('tabbarClick')
  },
}
</script>

<style lang='stylus' scoped>
.title
  display flex
  width 100%vw
  height 44px
  line-height 44px
  text-align center
  background-color #ff8198
  color #ffffff
  z-index 9
  .text
    flex 1
    font-size 20px
    font-weight 700
.wrapper
  height 474px
  overflow hidden
  .swiper
    width 100%
    height 166.7px
  .swiper-container
    --swiper-theme-color: #ffffff
  .recommend-view
    display flex
    text-align center
    padding 5px 0 10px 0
    font-size 12px
    border-bottom 8px solid #eee;
    .recommend-item
      flex 1
      img
        width 68px
        height 68px
  .feature-view
    width 100%vw
    img
      width 100%
  .tabControl
    position absolute
    width: 100%;
    top: 44px;
    z-index: 9;
</style>